<template>
  <div>
    <p>窗口：{{ top }}</p>
    <p>div滚动距离：{{divTop}}</p>
    <h1>生命周期</h1>
    <input type="text" value="100" ref="inp" />
    <div style="height:850px;overflow: auto;" ref="mydiv">
      <div v-for="item in list" :key="item.docid">
        {{ item.summary }}
        <hr />
      </div>
    </div>
  </div>
</template>
<script setup>
//  setup 没有创建前后,其它的生命周期前面加on
import { reactive, ref, onMounted } from "vue";
import useScroll from "@/use/useScroll";
const list = reactive([]);
// 在setup函数中直接当created
const getJok = () => {
  fetch("http://dida100.com/mi/list.php")
    .then((res) => res.json())
    .then((res) => {
      //把新获取的数据添加到list中
      list.push(...res.result);
    })
    .catch((err) => console.error(err));
};
getJok();

const inp = ref();

// 等组件加载完毕，获取inp的值
onMounted(() => {
  //第一个value，是input的框，第二个是input的值
  // alert(inp.value.value);
});

const mydiv = ref();

const top = useScroll();
//传入一个ref引用对象
const divTop = useScroll(mydiv);
</script>
